<template>
  <Panel title="商品添加">
    <div slot="container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品 ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属分类">
                <span>{{ props.row.category }}</span>
              </el-form-item>
              <el-form-item label="商品价格">
                <span>{{ props.row.price }}</span>
              </el-form-item>
              <el-form-item label="商品图片">
                <el-image :src="editForm.imgUrl"> </el-image>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ props.row.ctime | normalDate }}</span>
              </el-form-item>
              <el-form-item label="商品评分">
                <span>{{ props.row.rating }}</span>
              </el-form-item>
              <el-form-item label="商品销量">
                <span>{{ props.row.sellCount }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.goodsDesc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <el-table-column label="所属分类" prop="category"> </el-table-column>
        <el-table-column label="商品价格" prop="price"> </el-table-column>
        <el-table-column label="商品图片" prop="imgUrl">
          <el-image :src="editForm.imgUrl"> </el-image>
        </el-table-column>
        <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)"
              t
              type="primary"
              >编辑</el-button
            >
            <el-popconfirm
              title="您确定删除吗?"
              class="ml10"
              @confirm="handleDelete(scope.row.id)"
            >
              <el-button size="mini" type="danger" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 编辑弹窗 -->
      <el-dialog title="修改账号信息" :visible.sync="dialogFormVisible">
        <el-form :model="editForm">
          <el-form-item label="商品名称" label-width="100px">
            <el-input v-model="editForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" label-width="100px">
            <el-input v-model="editForm.category" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" label-width="100px">
            <el-input v-model="editForm.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品图片" label-width="100px">
            <el-upload
              class="avatar-uploader"
              action="http://sell.h5.itsource.cn:8087/goods/goods_img_upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="editForm.imgUrl"
                :src="editForm.imgUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品描述" label-width="100px">
            <el-input
              v-model="editForm.goodsDesc"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 分页 -->
      <div class="mt20">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </Panel>
</template>

<script>
import Panel from "@/components/Panel.vue";

//获取商品列表接口
import { reqList, reqDel, reqEdit } from "@/api/goods";

export default {
  components: {
    Panel,
  },
  data() {
    return {
      condition: true,
      // 列表数据
      tableData: [],

      //分页
      currentPage: 1, //当前页码值,一定要以1开始
      pageSize: 5, //每一页显示多少条
      total: 0, //总共条数

      //编辑弹框
      dialogFormVisible: false,

      //编辑的数据
      editForm: {
        id: "", //id
        name: "", //商品名称
        category: "", //商品分类
        price: "", //商品价格
        imgUrl: "", //商品图片地址
        ctime: "", //商品创建时间
        rating: "", //商品评价
        sellCount: "", //商品销量
        goodsDesc: "", //商品描述
      },
    };
  },

  //生命周期
  created() {
    this.getData();
  },

  methods: {
    //获取列表数据
    async getData() {
      let res = await reqList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      console.log(res);

      //3.解构
      let { data, total } = res.data;

      //判定---如果把当前页数据清空后,需要回拉一页,显示前一页的数据,如果已经是第一页,不操作
      if (!data.length && this.currentPage != 1) {
        this.currentPage -= 1; //回拉一页
        this.getData(); //重新渲染数据
      }

      //4.处理数据格式
      //5.把处理好的数据放到指定位置
      this.tableData = data;
      this.total = total;
      // console.log(data);
      console.log(this.tableData);
    },

    //删除商品列表功能
    async handleDelete(id) {
      //发送ajax
      let res = await reqDel({ id });

      //判定
      if (res.data.code == 0) {
        // this.$message.success(res.data.msg);
        //重新获取数据
        this.getData();
      }
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },

    //编辑功能
    handleEdit(row) {
      //把当前行数据设置到editForm上
      this.editForm = { ...row };
      //弹出对话框
      this.dialogFormVisible = true;
    },

    //保存修改信息
    async saveEdit() {
      let res = await reqEdit(this.editForm);
      // console.log(res);
      //判定
      if (res.data.code == 0) {
        //提示
        // this.$message.success(res.data.msg);
        this.dialogFormVisible = false;
        // this.editForm.imgUrl = res.imgUrl;
        this.getData();
      }
    },

    //修改图片
    handleAvatarSuccess(res) {
      this.editForm.imgUrl = res.imgUrl;
    },

    //图片格式和大小
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2; //商品图片大小判断
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG,PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },
  },
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.ml10 {
  margin-left: 10px;
}
/deep/.cell {
  overflow: hidden;
}

.mt20 {
  margin-top: 20px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.el-image {
  width: 50px;
  height: 50px;
}
</style>